<template>
	<van-cell :to="'/article/' + article.art_id" class="article-item">
		<template #title>
			<div class="title van-multi-ellipsis--l2">{{article.title}}</div>
		</template>
		<template #label>
			<div v-if="article.cover.type === 3" class="cover-wrap">
				<div class="cover-item" v-for="(img, index) in article.cover.images" :key="index">
					<van-image lazy-load class="cover-item-img" fit="cover" :src="img"></van-image>
				</div>
			</div>
			<div class="label-info-wrap">
				<span>{{article.aut_name}}</span>
				<span>{{article.comm_count}}评论</span>
				<span>{{article.pubdate | relativeTime}}</span>
			</div>
		</template>
		<van-image lazy-load fit="cover" class="right-cover" v-if="article.cover.type === 1" :src="article.cover.images[0]" />
	</van-cell>
</template>

<script>
	export default {
		props: {
			article: {
				type: Object,
				required: true
			},
		},

	}
</script>

<style lang="less" scoped>
	.article-item {
		.title {
			font-size: 32px;
			color: #3a3a3a;
		}

		.van-cell__value {
			flex: unset;
			width: 232px;
			height: 146px;
			padding-left: 25px;
		}

		.right-cover {
			width: 232px;
			height: 146px;
		}
		
		.label-info-wrap span{
			font-size: 22px;
			color: #b4b4b4;
			margin-right: 25px;
		}
		
		.cover-wrap {
			display: flex;
			
			.cover-item {
				flex: 1;
				height: 146px;
				padding: 30px 0;
				
				&:not(:last-child) {
					padding-right: 4px;
				}
				.cover-item-img {
					width: 100%;
					height: 146px;
				}
			}
		}
	}
</style>
